<template>
    <div id="detail">
        <detail-nav-bar class="detail-nav-bar" @navClick="navClick" ref="detailNavBar"/>
        <scroll class="detail-scroll" ref="scroll" :probe-type="3"
                @scroll="contentScroll">
            <detail-show-swiper :top-images="topImages"/>
            <detail-base-info :goods="goods"/>
            <detail-shop-info :shop="shop"/>
            <detail-goods-info :detail-info="detailInfo" @imgLoaded="imgLoaded"/>
            <detail-param-info :paramInfo="goodsParam" ref="params"/>
            <detail-comment-info :comment-info="commentInfo" ref="comment"/>
            <detail-recommend-info :recommend-list="recommendList" ref="recommend"/>
        </scroll>
        <detail-bottom-bar @addToCart="addToCart"/>
        <back-top @click.native="backTop" v-show="isShowBackTop"/>
    </div>
</template>

<script>
    import {getDetail,Goods,Shop,GoodsParam,getRecommend} from 'network/detail'
    import DetailNavBar from './childComps/DetailNavBar'
    import DetailShowSwiper from "./childComps/DetailShowSwiper"
    import DetailBaseInfo from './childComps/DetailBaseInfo'
    import DetailShopInfo from './childComps/DetailShopInfo'
    import DetailGoodsInfo from './childComps/DetailGoodsInfo'
    import DetailParamInfo from './childComps/DetailParamInfo'
    import DetailCommentInfo from './childComps/DetailCommentInfo'
    import DetailRecommendInfo from './childComps/DetailRecommendInfo'
    import DetailBottomBar from './childComps/DetailBottomBar'
    import Toast from "components/common/toast/Toast"

    import {debounce} from "common/utils";
    import Scroll from 'components/common/scroll/Scroll'

    import {backTop} from "common/mixin.js"
    import {mapActions} from "vuex"

    export default {
        name: "Detail",
        components:{
            DetailCommentInfo,
            DetailNavBar,
            DetailShowSwiper,
            DetailBaseInfo,
            DetailShopInfo,
            DetailGoodsInfo,
            Scroll,
            DetailParamInfo,
            DetailRecommendInfo,
            DetailBottomBar,
            Toast
        },
        data(){
            return{
                topImages:[],
                iid:"",
                goods:{},
                shop:{},
                detailInfo:{},
                goodsParam:{},
                commentInfo:{},
                recommendList: [],
                topY:[],
                getTopY:null,
                currentIndex:0
            }
        },
        mixins:[backTop],
        created(){
            this.iid = this.$route.query.iid
            getDetail(this.iid).then(res => {

                //获取结果
                const data = res.data
                //1.获取顶部图片
                this.topImages = data.result.itemInfo.topImages

                //2.获取商品信息
                this.goods = new Goods(data.result.itemInfo, data.result.columns, data.result.shopInfo.services);

                //3.获取店铺信息
                this.shop = new Shop(data.result.shopInfo);

                //4.获取商品详细信息
                this.detailInfo = data.result.detailInfo

                //5.获取商品的参数
                this.goodsParam = new GoodsParam(data.result.itemParams.info,data.result.itemParams.rule)

                //6获取评论
                if (data.result.rate.list) {
                    this.commentInfo = data.result.rate.list[0];
                }
            })

            //获取推荐信息
            getRecommend().then(res => {
                this.recommendList = res.data.data.list
            })

            this.getTopY = debounce(()=>{
                this.topY.push(0)
                this.topY.push(this.$refs.params.$el.offsetTop - 50)
                this.topY.push(this.$refs.comment.$el.offsetTop)
                this.topY.push(this.$refs.recommend.$el.offsetTop)

                this.topY.push(Number.MAX_VALUE)
            },200)

        },
        methods:{
            ...mapActions(['addCart']),
            imgLoaded(){
                this.$refs.scroll.refresh()
                this.getTopY()
            },
            navClick(index){
                this.$refs.scroll.scrollTo(0,-this.topY[index],200)
            },
            addToCart(){
                let obj = {}
                obj.iid = this.iid;
                obj.imgURL = this.topImages[0]
                obj.title = this.goods.title
                obj.desc = this.goods.desc;
                obj.newPrice = this.goods.nowPrice;
                obj.count = 1


                this.addCart(obj).then(res => {
                    this.$toast.showToast( res, 1200)
                })
            },
            contentScroll(position){
                const length = this.topY.length
                for(let i = 0; i<length -1 ;i++){
                    if(this.currentIndex!== i && -position.y > this.topY[i] && -position.y <this.topY[i+1]){
                        this.currentIndex = i
                        this.$refs.detailNavBar.currentIndex = this.currentIndex
                    }
                }

                //1.判断backTop是否显示
                this.isShowBackTop = (-position.y) > 1000
            }
        },
        mounted(){
            //监听图片加载
            const refresh = debounce(this.$refs.scroll.refresh,500)

            this.$bus.$on("imageLoad",()=>{
                refresh()
            })

        }
    }
</script>

<style scoped>
    #detail{
        height: 100vh;
        position: relative;
        z-index: 1;
        background-color: #fff;
    }
    .detail-nav-bar{
        position: relative;
        background-color: #fff;
        z-index: 8;
    }
    .detail-scroll{
        height: calc(100% - 44px);
    }
</style>
